import type { Meta, StoryObj } from '@storybook/react-vite';
import { MikuButton } from './MikuButton';
import { message } from 'antd';

const meta = {
  title: 'Example/MikuButton',
  component: MikuButton,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    type: {
      description: '按钮类型'
    },
    mikuVariant: {
      description: '按钮样式'
    },
    mikuSize: {
      description: '按钮大小'
    },
    onClick: {
      description: '点击按钮时触发的事件'
    },
    loading: {
      description: '按钮是否处于加载状态'
    },
    loadingText: {
      description: '加载中的提示文本'
    },
    disabled: {
      description: '按钮是否禁用'
    },
    className: {
      description: '自定义样式类名'
    }
  },
} satisfies Meta<typeof MikuButton>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
  parameters: {
    docs: {
      description: {
        story: ' MikuButton 按钮组件，是一个初音风格的按钮组件，具有多种样式和尺寸选项，可自定义样式和行为。'
      },
      source: {
        code: `
          <div style={{ padding: '20px', display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
              <MikuButton mikuVariant="primary" mikuSize="small" disabled
              onClick={() => console.log("测试")}>
                已禁用
              </MikuButton>
              <MikuButton mikuVariant="secondary" mikuSize="small" disabled>
                禁用状态
              </MikuButton>
              <MikuButton mikuVariant="glow" mikuSize="small" disabled>
                发光禁用
              </MikuButton>
              <MikuButton mikuVariant="primary" mikuSize="medium" loading loadingText='选择数据中'
              onClick={() => console.log("测试")}>
                加载中...
              </MikuButton>
              <MikuButton mikuVariant="secondary" mikuSize="medium" loading>
                处理中...
              </MikuButton>
              <MikuButton mikuVariant="glow" mikuSize="medium" loading>
                处理中...
              </MikuButton>
              <MikuButton mikuVariant="primary" mikuSize="large">
                主要按钮
              </MikuButton>
              <MikuButton mikuVariant="secondary" mikuSize="large">
                次级按钮
              </MikuButton>
              <MikuButton mikuVariant="glow" mikuSize="large">
                发光按钮
              </MikuButton>
          </div>
        `
      }
    },
  },
  render: () => (
    <>
      <div style={{ padding: '20px', display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
          <MikuButton mikuVariant="primary" mikuSize="small" disabled
          onClick={() => console.log("测试")}>
            已禁用
          </MikuButton>
          <MikuButton mikuVariant="secondary" mikuSize="small" disabled>
            禁用状态
          </MikuButton>
          <MikuButton mikuVariant="glow" mikuSize="small" disabled>
            发光禁用
          </MikuButton>
          <MikuButton mikuVariant="primary" mikuSize="medium" loading loadingText='选择数据中'
          onClick={() => console.log("测试")}>
            加载中...
          </MikuButton>
          <MikuButton mikuVariant="secondary" mikuSize="medium" loading>
            处理中...
          </MikuButton>
          <MikuButton mikuVariant="glow" mikuSize="medium" loading>
            处理中...
          </MikuButton>
          <MikuButton mikuVariant="primary" mikuSize="large">
            主要按钮
          </MikuButton>
          <MikuButton mikuVariant="secondary" mikuSize="large">
            次级按钮
          </MikuButton>
          <MikuButton mikuVariant="glow" mikuSize="large">
            发光按钮
          </MikuButton>
      </div>
    </>
  ),
};